﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>系统登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        #loginForm {
            background-color: #FFF;
            height: 400px;
            width: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            flex-direction: column;
        }

        @media only screen and (max-width: 768px) {
            #loginForm {
                /*width:70%;*/

            }
        }

        .panel-heading.collapsed span.glyphicon-chevron-toggle:after {
            content: "\e114";
        }

        .panel-heading span.glyphicon-chevron-toggle:after {
            content: "\e113";
        }

        .modal.in .modal-dialog {
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);
            transform: translate(0, -50%)
        }

        .modal-dialog {
            position: absolute;
            width: auto;
            left: 0;
            right: 0;
            top: 40%;
        }

        @media ( min-width: 768px) {
            #loadMessage .modal-dialog {
                width: 400px;
            }
        }
    </style>

</head>
<body class="container" style="background-color: #ccc;">
<div id="loginForm">
    <h3>
        <span class="glyphicon glyphicon-user"></span> 系统登录</h3>
    <form action="${pageContext.request.contextPath}/user/login" method="post" onsubmit="return login();">
        <div class="form-group input-group">
            <label for="userName">用户名：</label>
            <div class="input-group">
					<span class="input-group-addon"> <i
                            class="glyphicon glyphicon-user"></i>
					</span> <input type="text" class="form-control input-group-lg"
                                   id="userName" name="userName" placeholder="请输入用户名"/>
            </div>
        </div>
        <div class="form-group input-group">
            <label for="userPwd">用户密码：</label>
            <div class="input-group">
					<span class="input-group-addon"> <i
                            class="glyphicon glyphicon-lock"></i>
					</span> <input type="text" class="form-control input-group-lg"
                                   id="userPwd" name="userPwd" placeholder="请输入密码"/>
            </div>
        </div>
        <div class="form-group">
            <div class="checkbox">
                <label> <input type="checkbox" id="autoLogin" name="autoLogin"/>下次自动登录</label>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" id="btnLogin" class="btn btn-danger btn-block btn-lg ">登 录</button>
            <button type="reset" class="btn btn-warning btn-lg btn-block">取 消</button>
        </div>
    </form>
    <ul class="nav nav-pills">
        <li><a href="javascript:">忘记密码</a></li>
        <li><a href="javascript:">用户注册</a></li>
    </ul>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
<script>
    //jQuery验证非空表单元素提交给服务器
    function login() {
        var loginName = $("#userName");//获取用户名对象
        var loginPwd = $("#userPwd");//获取用户密码
        if (loginName.val() === "") {//用户名为空
            alert("用户名不能为空");
            loginName.focus();//获取焦点
            return false;//阻止表单提交
        } else if (loginPwd.val() === "") {
            alert("密码不能为空");
            loginPwd.focus();
            return false;//阻止表单提交
        }
    }
</script>
</body>
</html>